<div class="subheader">
  <div class="fixed-container">
    <div class="btn-group pull-right">
      <button type="button" class="btn btn-default" ng-click="createCaseModel()" translate>
        CASE-LIST.ACTION.CREATE
      </button>
      <button type="button" class="btn btn-default" ng-click="importCaseModel()" translate>
        CASE-LIST.ACTION.IMPORT
      </button>
    </div>
    <h2>{{ 'CASE-LIST.TITLE' | translate }}</h2>
  </div>
</div>
<div class="container-fluid content" auto-height offset="40">
  <div class="col-xs-2 filter-wrapper">
    <div class="input-group">
      <span class="input-group-addon"> <i class="glyphicon glyphicon-search"></i> </span>
      <input
        type="text"
        ng-model="model.pendingFilterText"
        class="form-control"
        ng-change="filterDelayed()"
        placeholder="{{ 'CASE-LIST.SEARCH-PLACEHOLDER' | translate }}"
      />
    </div>
    <ul class="filter-list">
      <li ng-repeat="filter in model.filters" ng-class="{'current' : filter.id == model.activeFilter.id}">
        <a ng-click="activateFilter(filter)">{{ 'CASE-LIST.FILTER.' + filter.labelKey | translate }}</a>
      </li>
    </ul>
  </div>

  <div class="col-xs-10 item-wrapper" id="list-items">
    <div class="dropdown-subtle pull-right">
      <div class="btn-group btn-group-sm" activiti-fix-dropdown-bug>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          {{ 'CASE-LIST.SORT.' + model.activeSort.labelKey | translate }} <i class="caret"></i>
        </button>
        <ul class="dropdown-menu pull-right">
          <li ng-repeat="sort in model.sorts">
            <a ng-click="activateSort(sort)">{{ 'CASE-LIST.SORT.' + sort.labelKey | translate }}</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="message clearfix">
      <div class="loading pull-left" ng-show="model.loading">
        <div class="l1"></div>
        <div class="l2"></div>
        <div class="l2"></div>
      </div>
      <div ng-if="!model.loading">
        <span ng-if="model.caseModels.size > 1">{{
          'CASE-LIST.FILTER.' + model.activeFilter.labelKey + '-COUNT' | translate: model.caseModels
        }}</span>
        <span ng-if="model.caseModels.size == 1">{{
          'CASE-LIST.FILTER.' + model.activeFilter.labelKey + '-ONE' | translate
        }}</span>
        <span ng-if="model.caseModels.size > 0 && model.filterText !='' && model.filterText !== undefined">{{
          'CASE-LIST.FILTER.FILTER-TEXT' | translate: model
        }}</span>
        <span ng-if="model.caseModels.size == 0 && model.filterText !='' && model.filterText !== undefined">{{
          'CASE-LIST.FILTER.FILTER-TEXT-EMPTY' | translate: model
        }}</span>
      </div>
    </div>

    <div
      class="help-container fixed"
      ng-if="model.caseModels.size == 0 && (!model.filterText || model.filterText == '')"
    >
      <div>
        <div class="help-text wide">
          <div class="description">
            {{ 'CASE-LIST.FILTER.CASES-EMPTY' | translate }}
          </div>
          <div class="help-entry" ng-click="createCaseModel()">
            <span class="glyphicon glyphicon-plus-sign"></span>
            <span translate="CASE-LIST.FILTER.CASES-CMMN-HINT"></span>
            <br />
          </div>
          <div class="help-entry" ng-click="importCaseModel()">
            <span class="glyphicon glyphicon-plus-sign"></span>
            <span translate="CASE-LIST.FILTER.CASES-CMMN-IMPORT-HINT"></span>
            <br />
          </div>
        </div>
      </div>
    </div>
    <div class="item fadein" ng-repeat="caseModel in model.caseModels.data track by $index">
      <div
        class="item-box"
        ng-style="{'background-image': 'url(\'' + getModelThumbnailUrl(caseModel.id, imageVersion) + '\')'}"
        ng-click="showCaseModelDetails(caseModel);"
      >
        <div class="actions">
          <span class="badge">v{{ caseModel.version }}</span>
          <div class="btn-group pull-right">
            <button
              id="detailsButton"
              type="button"
              ng-click="showCaseModelDetails(caseModel); $event.stopPropagation();"
              class="btn btn-default"
              title="{{ 'CASE.ACTION.DETAILS' | translate }}"
            >
              <i class="glyphicon glyphicon-search"></i>
            </button>
            <button
              id="editButton"
              type="button"
              ng-click="editCaseModelDetails(caseModel); $event.stopPropagation();"
              class="btn btn-default"
              title="{{ 'CASE.ACTION.OPEN-IN-EDITOR' | translate }}"
            >
              <i class="glyphicon glyphicon-edit"></i>
            </button>
          </div>
        </div>
        <div class="details">
          <h3 class="truncate" title="{{ caseModel.name }}">
            {{ caseModel.name }}
          </h3>
          <div class="basic-details truncate">
            <span><i class="glyphicon glyphicon-user"></i> {{ caseModel.createdBy }}</span>
            <span title="{{ caseModel.lastUpdated | dateformat: 'LLLL' }}"
              ><i class="glyphicon glyphicon-pencil"></i> {{ caseModel.lastUpdated | dateformat }}</span
            >
          </div>
          <p>{{ caseModel.description }}</p>
        </div>
      </div>
    </div>

    <div class="show-more" ng-if="model.caseModels.data.length < model.caseModels.total">
      <a>{{ 'CASE-LIST.ACTION.SHOW-MORE' | translate }}</a>
    </div>
  </div>
</div>
